<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <style>
        #begin{
            width: 750px;
            min-width: 320px;
            height: 310px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #begin .box{
            flex: 1;
        }
        #begin .box1{
            margin-top: 36px;
            margin-bottom: 10px;
        }
        #begin .box2{
            font-size: 32px;
            color: #1a1a1a;
        }
        #begin .box3{
            width: 200px;
            height: 70px;
            background-color: #0084ff;
            margin-bottom: 38px;
            border-radius: 70px;
            color: #fff;
            font-size: 26px;
            text-align: center;
            line-height: 70px;

        }
        #intresting{
            width: 750px;
            min-width: 320px;
            height: 80px;
            margin: 0 auto;
            
        }
        #intresting .w{
            display: flex;
            justify-content: space-between;
        }
        #intresting a{
            font-size: 28px;
            font-weight: 700;
            color: #1a1a1a;
        }
        #new{
            width: 750px;
            min-width: 320px;
            height: 80px;
            margin: 0 auto;
            height: 640px;
            background-color: cornflowerblue;
        }
        #new .w{
            height: 640px;
            display: flex;
        }
        #new .w .four{
              flex: 1;
              width: 700px;
              background-color: crimson;
              display: flex;
              justify-content: space-between;
        }
        #new .w .four .box1{
             width: 85px;
             height: 160px;
        }
        #new .w .box1{
             flex: 1;
             height: 160px;
        }
        #new .w .box3{
             width: 150px;
             height: 160px;
        }

    </style>
</head>
<body>
    <!-- 头部提问 -->
    <div id="header">
        <div class="w">
            <span class="iconfont icon-sousuo"></span><input type="text" placeholder="搜索知乎内容">
            <div class="search">
                <span class="iconfont icon-yijianfankui"><a href="#">提问</a>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <a href="#">关注</a>
        <a href="#">推荐</a>
        <a href="#">热榜</a>
        <a href="#">视频</a>
    </div>
    <!-- 开始吧 -->
    <div id="begin">
        <div class="box box1"><img src="img/首页-关注_03.jpg" alt=""></div>
        <div class="box box2">想在知乎上认识志趣相投的朋友吗？</div>
        <div class="box box3">开始吧</div>
    </div>
    <!-- 你可能感兴趣的人 -->
    <div id="intresting">
        <div class="w">
            <a href="#">你可能感兴趣的人</a>
        <span>。。。</span>
        </div>
    </div>
    <!-- 新闻详情 -->
    <div id="new">
        <div class="w">
            <div class="four">
                <div class="box box1">
                    <img src="img/首页-关注_07.jpg" alt="">
                </div>
                <div class="box box2">
                    <h1>丁香医生</h1>
                    <p>已认证的官方账号</p>
                    <p>436回答 1，693，363关注</p>
                </div>
                <div class="box box3">+关注</div>
            </div>
            <div class="four">
                <div class="box box1"></div>
                <div class="box box2"></div>
                <div class="box box3"></div>
            </div>
            <div class="four">
                <div class="box box1"></div>
                <div class="box box2"></div>
                <div class="box box3"></div>
            </div>
            <div class="four">
                <div class="box box1"></div>
                <div class="box box2"></div>
                <div class="box box3"></div>
            </div>

        </div>
    </div>
    
</body>
</html>